<markup>
<section data-view-id = "page1">
	<header>视图1</header>

	<div class = "note note1 visible">
		这是一段注释文本。
		这段文本是否显示，取决于配置项："displaying-note" 的取值。
		<br/>"note1"：显示，其它不显示。
	</div>
	<div class = "note note2">
		这是另一段注释文本。
		这段文本是否显示，取决于配置项："displaying-note" 的取值。
		<br/>"note2"：显示，其它不显示。
	</div>

	<div data-view-rel = "page2" class = "btn">进入视图2</div>
</section>
<section data-view-id = "page2">
	<header><span class = "nav-back" data-view-rel = ":back"></span>视图2</header>

	<div class = "btn toggle-page1-displaying-note">切换视图1显示的注释文本</div>
</section>
</markup>
<link rel = "stylesheet" href = "demo/css/common.css"/>
<style>
/* 默认不可见 */
.note{
	display: none;
	margin: 0.12rem;
	border-radius: 0.05rem;
	padding: 0.12rem;
	border: solid 1px #DDDDDD;
}
.note2{
	color: #999999;
	border: none;
}

/**
 * 使用css响应视图配置。
 * data-viewconfig_* 属性由 View.js 在 reflectToDom 方法调用时自动附加
 */
[data-view-id=page1][data-viewconfig_displaying-note=note1] .note1{
	display: block;
}
[data-view-id=page1][data-viewconfig_displaying-note=note2] .note2{
	display: block;
}
</style>
<script>
var page1 = View.ofId("page1");

/**
 * 获取（没有时自动创建）名为：'displaying-note'的配置项，并设置默认值为 true。
 * 当调用 reflectToDom() 方法时，View.js 将自动在视图容器上附加 data-viewconfig_* 属性，
 * 然后开发者可以据此在样式表中撰写相应逻辑。
 */
page1.config.get("displaying-note").setValue("note1").reflectToDom();

/**
 * 切换视图1显示的注释文本
 */
var page2ToggleObj = View.ofId("page2").find(".toggle-page1-displaying-note");
var validValues = ["note1", "note2"], i = 0;
page2ToggleObj.addEventListener("click", function () {
	var newValue = validValues[++i % validValues.length];

	/* 第二个参数：true 代表是否覆盖既有取值（非必填，默认为 false） */
	page1.config.get("displaying-note").setValue(newValue, true).reflectToDom();

	/* 自动返回 */
	View.back();
});
</script>